﻿<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js点击按钮右下角弹出消息通知提示框代码</title>
<!--可无视-->
<link rel="stylesheet" type="text/css" href="css/bootstrap-grid.min.css" /><!--CSS RESET-->
<link rel="stylesheet" type="text/css" href="css/demo.css"><!--演示页面样式，使用时可以不引用-->
<!--必要样式-->
<link rel="stylesheet" href="css/nt.min.css">
</head>
<body>
<div class="container">
	<div class="row" style="padding:2em 0">
		<div class="col-md-2">
			<button class="btn btn-error"  onclick="narn('log')">默认（log）</button>
		</div>
		<div class="col-md-2"><button class="btn btn-success" onClick="narn('success')">成功（success）</button></div>
		<div class="col-md-2"><button class="btn btn-warning"  onclick="narn('warn')">警告（warn）</button></div>
		<div class="col-md-2"><button class="btn btn-danger"  onclick="narn('error')">危险（error）</button></div>
	</div>
</div>

<script type="text/javascript" src="js/nt.js"></script>
<script type="text/javascript">
	function initNt (type) {
		nt()[type]({
		  title: '新短消息提示',
		  text: '单击“查看”查看最新通知',
		  timeout: 'keep',
		  buttons: [{
			text: '查看',
			click: function (e) {
			  nt().success({
				title: '通知',
				text: '通知被查看'
			  })
			}
		  },{
			text: '取消',
			click: function (e) {
			  e.closeNotification()
			}
		  }]
		})
	  }



    setTimeout("initNt('log')", 1000)
    setTimeout("initNt('success')", 1000)
    setTimeout("initNt('warn')", 1000)
    setTimeout("initNt('error')", 1000)
    setTimeout("initNt('log')", 1000)
    setTimeout("initNt('success')", 1000)
    setTimeout("initNt('warn')", 1000)
    setTimeout("initNt('error')", 1000)
    setTimeout("initNt('log')", 1000)
    setTimeout("initNt('success')", 1000)
    setTimeout("initNt('warn')", 1000)
    setTimeout("initNt('error')", 1000)
</script>
</div>
</body>
</html>